<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>
  
<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl";
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import RadiusMode from '@/utils/RadiusMode';
import styles from '@/utils/draw/theme'
export default {
  name: "Vue2MapboxMapTemplate",
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      const map = new mapboxgl.Map({
        container: "map", // container ID
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", // style URL
        center: [118.79013542048335, 32.05775855185749], // starting position [lng, lat]
        // center: mapboxgl.MercatorCoordinate.fromLngLat([118.79013542048335,32.05775855185749]), // starting position [lng, lat]
        zoom: 5, // starting zoom
        projection: "mercator",
      });

      //
      map.on("click", (evt) => {
        console.log(evt.lngLat);
        let features = map.queryRenderedFeatures(evt.point);
        console.log(features[0]);
      });

      const draw = new MapboxDraw({
        displayControlsDefault: false,
        // displayControlsDefault: true,
        // Select which mapbox-gl-draw control buttons to add to the map.
        controls: {
          polygon: true,
          trash: true,
          radius: true
        },
        modes: {
          ...MapboxDraw.modes,
          draw_radius: RadiusMode
        },
        defaultMode: 'draw_radius', // 设置默认的绘图模式为绘制点
        styles: styles
      });
      map.addControl(draw);
      // console.log(draw, 'drawdrawdrawdraw');
      map.on('draw.create', function (e) {
        const feature = e.features[0];
        // 处理多边形绘制完成后的逻辑，比如保存数据或执行其他操作
        console.log(feature);

        const data = draw.getAll();
        console.log(data)
        // map.setPaintProperty('gl-draw-point', 'fill-color', '#FF0000'); // 设置填充颜色为红色
        // map.setPaintProperty('gl-draw-point', 'fill-opacity', 0.5); // 设置填充透明度为50%
      });

    },
  },
};
</script>
  
<style></style>
  